import React, { useEffect, useState, useRef } from "react";
import { Form, Input, Button, Checkbox, Table, message, Pagination, Popconfirm, Modal } from 'antd';
import "../../static/css/School/SchoolList.css"
import type { ColumnsType } from 'antd/lib/table';
import { getList, getDel } from '../../apis/school/list'
import { useNavigate } from "react-router";
import { getShow } from "../../apis/school/show"

interface DataType {
    news_id: number;
    title: string;
    author: string;
    keywords: string;
}

const SchoolList: React.FC = (): JSX.Element => {
    const navigate = useNavigate()
    // 复选框选中的数据
    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);
    // 列表数据
    const [data, setData] = useState<DataType[]>()
    // 数据总条数
    const [total, setTotal] = useState<number>(0)
    const [form] = Form.useForm();
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [url, setUrl] = useState()
    const [content,setContent]=useState<any>()
    const echo: any = useRef()

    const { TextArea } = Input;
    interface IParams {
        page: number
        pageSize: number
        idortitle?: string
    }
    // 点击删除
    const del = (text: any): any => {
        return () => {
            delInfo({ news_id: text })
        }
    }
    // 二次封装删除接口
    const delInfo = async (params: any) => {
        const res: any = await getDel(params)
        if (res.code === '00000') {
            message.success('删除成功！')
            getListInfo(params)
        } else {
            message.error(res.msg)
        }


    }
    // 点击修改
    const up = (params: any) => {
        return () => {
            navigate('/school/add_upd', { state: params })
        }
    }
    const columns: any = [
        {
            title: '标题',
            dataIndex: 'title',
        },
        {
            title: '作者',
            dataIndex: 'author',
        },
        {
            title: '关键字',
            dataIndex: 'keywords',
        },
        {
            title: '操作',
            dataIndex: 'news_id',
            render: (text: any, params: any): any => {
                return (
                    <div className="buts">
                        <Button type="primary" className="addButton" onClick={up(params)}>修改</Button>
                        <Popconfirm
                            title="是否确认删除?"
                            onConfirm={del(text)}
                            onCancel={cancel}
                            okText="Yes"
                            cancelText="No"
                        >
                            <Button type="primary" danger>删除</Button>
                        </Popconfirm>

                        <Button type="primary" className="look" onClick={showModal(text)}>详情</Button>
                    </div>
                )
            }
        },
    ];


    const [params, setParams] = useState<IParams>({ page: 1, pageSize: 20, idortitle: '' })
    // 请求列表数据
    const getListInfo = async (params: IParams) => {
        const res: any = await getList(params)
        if (res.code === '00000') {
            setData(res.data)
            setTotal(res.total)
        } else {
            message.error(res.mag)
        }
    }

    useEffect(() => {
        // 调用请求列表数据
        getListInfo(params)
    }, [])
    useEffect(() => {
        // 调用请求列表数据
        getListInfo(params)
    }, [params])
    // 点击查询获取input值
    const onFinish = (values: any) => {
        setParams({ ...params, idortitle: values.idortitle })
    };
    // 复选框选中的数据
    const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
        console.log('selectedRowKeys changed: ', selectedRowKeys);
        setSelectedRowKeys(newSelectedRowKeys);
    };
    const dels = () => {
        delInfo({ news_id: selectedRowKeys })

    }
    const rowSelection = {
        selectedRowKeys,
        onChange: onSelectChange,
    };
    // 分页
    const onChange = (page: number, pageSize: number) => {
        setParams({ ...params, page, pageSize })
    }
    // 点击跳转添加
    const add = () => {
        navigate('/school/add_upd')
    }
    // 删除，点击取消
    const cancel: any = (e: React.MouseEvent<HTMLElement>) => {
        // console.log(e);
        message.error('取消删除');
    };
    const showModal = (id: number) => {
        return async () => {
            setIsModalVisible(true);
            const res: any = await getShow(id)
            if (res.code === '00000') {
                echo.current.setFieldsValue(res.data)
                setUrl(res.data.thumb)
                setContent(res.data.content)
            }


        }
    };

    const handleOk = () => {
        setIsModalVisible(false);
    };

    const handleCancel = () => {
        setIsModalVisible(false);
    };
    return (
        <div className="SchoolListBody">
            <div className="SchoolListTop">
                <Form onFinish={onFinish}>
                    <Form.Item name="idortitle">
                        <div style={{ width: '200px', height: '28px' }}>
                            <Input placeholder="请输入查询内容" />
                        </div>
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit">
                            查询
                        </Button>
                    </Form.Item>
                </Form>
                <Button type="primary" className="addButton" onClick={add}>添加</Button>
                <Popconfirm
                    title="是否确认删除?"
                    onConfirm={dels}
                    onCancel={cancel}
                    okText="Yes"
                    cancelText="No"
                    disabled={selectedRowKeys.length === 0}
                >
                    <Button type="primary" danger disabled={selectedRowKeys.length === 0}>
                        批量删除
                    </Button>
                </Popconfirm>

            </div>
            <div className="SchoolListTable">
                <Table bordered rowKey='news_id' rowSelection={rowSelection} pagination={false} columns={columns} dataSource={data} />
                <div className="pag">
                    <Pagination
                        total={total}
                        showSizeChanger
                        onChange={onChange}
                        showQuickJumper
                        showTotal={total => `共 ${total} 条`}
                    />
                </div>

            </div>
            <Modal title="详情" width={800} visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                <Form
                    name="basic"
                    labelCol={{ span: 3 }}
                    wrapperCol={{ span: 16 }}
                    initialValues={{ remember: true }}
                    onFinish={onFinish}
                    autoComplete="off"
                    form={form}
                    ref={echo}

                >
                    <Form.Item
                        label="标题"
                        name="title"
                    >
                        <Input size="small" disabled={true} bordered={false} />
                    </Form.Item>
                    <Form.Item
                        label="作者"
                        name="author"
                    >
                        <Input size="small" disabled={true} bordered={false} />
                    </Form.Item>
                    <Form.Item
                        label="关键字"
                        name="keywords"
                    >
                        <Input size="small" disabled={true} bordered={false} />
                    </Form.Item>

                    <Form.Item
                        label="介绍"
                        name="desc"
                    >
                        <TextArea rows={2} disabled={true} bordered={false} />
                    </Form.Item>
                    <Form.Item
                        label="正文"
                    >
                        <div  dangerouslySetInnerHTML={{__html:content}} />
                    </Form.Item>
                    <Form.Item
                        label="新闻添加时间"
                        name="add_time"
                    >
                        <Input size="small" disabled={true} bordered={false} />
                    </Form.Item>
                    <Form.Item
                        label="新闻图片"
                        name="add_time"
                    >
                        <img src={url} alt="" style={{ width: '100px', height: '100px' }} />
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    )
}
export default SchoolList